<template>
    <article>
        <el-row class="loginIndex">
            <el-col :span="12">
                <div class="login">
                    <el-form class="login-form">
                        <div class="title">
                            <img src="../../assets/logo/byyl-logo1.png" class="logo-img">
                        </div>
                        <el-form-item>
                            <el-input type="text" placeholder="请输入手机号" v-model="username">
                                <template #prefix>
                                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input type="password" placeholder="请输入密码" v-model="password">
                                <template #prefix>
                                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <div style="width:100%;text-align: left;">
                            <el-checkbox v-model="rememberMe" style="margin:0px 0px 25px 0px;" checked>记住我</el-checkbox>
                            <span class="rememberPass">
                               <a href="#">忘记密码</a>
                               <a href="#" @click.prevent="openRegisterDialog">注册</a>
                           </span>

                        </div>
                        <el-form-item style="width:100%;">
                            <el-button
                                    @click="handleLogin"
                                    :loading="loading"
                                    type="primary"
                                    style="width:100%;">
                                <span v-if="!loading">登 录</span>
                                <span v-else>登 录 中...</span>
                            </el-button>
                        </el-form-item>
                        <el-form-item style="width:100%;">
                            <el-button
                                    @click="getInfo"
                                    :loading="loading"
                                    type="primary"
                                    style="width:100%;">
                                <span v-if="!loading">获得信息</span>
                                <span v-else>获 得 中...</span>
                            </el-button>
                        </el-form-item>
                        <el-form-item style="width:100%;">
                            <el-button
                                    @click="logout"
                                    :loading="loading"
                                    type="primary"
                                    style="width:100%;">
                                <span v-if="!loading">安全退出</span>
                                <span v-else>退 出 中...</span>
                            </el-button>
                        </el-form-item>
                        <el-radio-group v-model="agree" style="margin:0px 0px 25px 0px;">
                            <el-radio>同意隐私协议和服务条款</el-radio>
                        </el-radio-group>
                        <!--  底部  -->
                        <div class="el-login-footer">
                            <div>
                                <span>帮助</span>
                                <span>隐私</span>
                                <span>条款</span>
                            </div>
                            <div>Copyright©2022 白医医疗技术部出品</div>
                        </div>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="11" :offset="1">
                <el-row class="navigationRow">
                    <el-col :span="5">
                        <div class="navigationDiv">
                            <svg-icon icon-class="iconPark-classroom" class="navigationSvn"/>
                            <div class="navigationTitle">我的患者</div>
                        </div>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <div class="navigationDiv">
                            <svg-icon icon-class="stLine-cloud-upload-l" class="navigationSvn"/>
                            <div class="navigationTitle">动态心电上传</div>
                        </div>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <div class="navigationDiv">
                            <svg-icon icon-class="if-history" class="navigationSvn"/>
                            <div class="navigationTitle">接诊记录</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row  class="navigationRow">
                    <el-col :span="5">
                        <div class="navigationDiv">
                            <svg-icon icon-class="iconPark-flash-payment" class="navigationSvn"/>
                            <div class="navigationTitle">极速问诊</div>
                        </div>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <div class="navigationDiv">
                            <svg-icon icon-class="iconPark-pesticide" class="navigationSvn"/>
                            <div class="navigationTitle">药械商城</div>
                        </div>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <div class="navigationDiv">
                            <svg-icon icon-class="iconPark-bookshelf" class="navigationSvn"/>
                            <div class="navigationTitle">学习交流</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row  class="navigationRow">
                    <el-col :span="5">
                        <div class="navigationDiv">
                            <svg-icon icon-class="antOutline-control" class="navigationSvn"/>
                            <div class="navigationTitle">慢病管理</div>
                        </div>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <div class="navigationDiv">
                            <svg-icon icon-class="antOutline-insurance" class="navigationSvn"/>
                            <div class="navigationTitle">保险套餐</div>
                        </div>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <div class="navigationDiv">
                            <svg-icon icon-class="md-chevron_right" class="navigationSvn"/>
                            <div class="navigationTitle">下一页</div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog
                v-model="dialogVisible"
                title="用户注册"
                width="30%"
                :close-on-click-modal="false"
                :append-to-body="true"
                :before-close="handleClose">
            <el-row>
                <el-form :model="form" label-width="120px" ref="addForm" :rules="rules">
                    <el-form-item label="手机号" prop="username">
                        <el-input type="text" placeholder="请输入手机号" v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input type="password" placeholder="请输入密码" v-model="form.confirmPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input type="text" placeholder="请输入姓名" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input type="text" placeholder="请输入地址" v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="营业执照" prop="businessLicense">
                        <file-upload :limitSize="1" :errMsg="businessLicenseErrMsg" v-if="DestroyIncomeStatistics==true" @uploadComplete="recordBusinessLicense"></file-upload>
                    </el-form-item>
                    <el-form-item label="医师证书" prop="certificate">
                        <!--recordBusinessLicense -->
                        <file-upload v-if="DestroyIncomeStatistics==true" @uploadComplete="recordCertificate"></file-upload>
                       <!-- <el-input type="text" placeholder="请选择医师证书" v-model="form.certificate"  class="form-el-input"></el-input>-->
                    </el-form-item>
                </el-form>
            </el-row>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleRegister">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </article>
</template>

<script>

    import {login,list,logout} from '@/api/login'
    import {setToken,removeToken} from '@/utils/auth'
    import {validatePhone} from '@/utils/validate'
    import {register} from '@/api/localDoctor'
    import {materialsUpload} from '@/api/common'
    import {ElMessage} from "element-plus";
    // 1-引入子组件
    import FileUpload from '@/views/components/fileUpload'

    export default {
        name: "loginIndex",
        // 注册子组件
        components:{
            FileUpload
        },
        data(){
            // 写代码
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.form.confirmPassword !== '') {
                        // this.$refs["addForm"]
                        this.$refs.addForm.validateField('confirmPassword').catch(err=>{});
                    }
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                tableData: [
                    {
                        date: '2016-05-03',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-02',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-04',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-01',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                ],
                businessLicenseErrMsg: '只能上传图片',
                // 组件刷新控制
                DestroyIncomeStatistics: true,
                options:{
                    businessLicenseImg: undefined,
                    certificateImg: undefined
                },
                rules: {
                    username: [
                        {required: true, message: "请输入用户名"},
                        {validator: validatePhone, trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur' },
                        {min: 6, max: 16, message: '长度在6到16 个字符', trigger: 'blur'},
                        {validator: validatePass, trigger: "blur"}
                    ],
                    confirmPassword: [
                        {required: true, message: '请确认密码', trigger: 'blur' },
                        {min: 6, max: 16, message: '长度在6到16 个字符', trigger: 'blur'},
                        {validator: validatePass2, trigger: "blur"}
                    ],
                    name: [
                        {required: true, message: "请输入真实姓名"}
                    ],
                    address: [
                        {required: true, message: "请输入地址"}
                    ],
                },
                form: {
                    // undefined   ''   null 这三个是不一样的
                    username: undefined,
                    password: '',
                    confirmPassword: '',
                    name: undefined,
                    address: undefined,
                    businessLicense: undefined,
                    certificate: undefined
                },
                dialogVisible: false,
                username: "13756305180",
                password: "111111",
                rememberMe: false,
                loading: false,
                agree: false
            }
        },
        methods:{
            recordBusinessLicense(file){
                console.log("父组件接收了子组件的营业执照文件");
                console.log(file);
                // 完成业务  赋值
                this.form.businessLicense = file;
            },
            recordCertificate(file){
                console.log("父组件接收了子组件的医师证书文件");
                console.log(file);
                // 完成业务  赋值
                this.form.certificate = file;
            },
            async handleRegister(){
                this.$refs["addForm"].validate(valid=>{
                    console.log(valid);
                    if(valid){
                        console.log("注册接口调用");
                        // 上传文件加到form中
                        // 文件上传
                        const formData = new FormData()
                        // 2张图片
                        formData.append('businessLicense',this.form.businessLicense);
                        formData.append('certificate',this.form.certificate);
                        // 表单数据
                        formData.append('username',this.form.username);
                        formData.append('password',this.form.password);
                        formData.append('name',this.form.name);
                        formData.append('address',this.form.address);
                        console.log(formData,"formData");
                        register(formData).then(response=>{
                            console.log(response);
                            if(response.code==200){
                                ElMessage({
                                    showClose: true,
                                    message: "注册成功",
                                    type: 'success',
                                })
                                // 关闭
                                this.handleClose();
                                // 重置表单
                                this.$refs["addForm"].resetFields();
                                // 重置上传组件
                                this.resetUpload();
                            }
                        }).catch(err=>{
                            console.log(err);
                        }).finally(()=>{

                        });
                    }
                });
            },
            resetUpload(){
                // 文件组件隐藏
                this.DestroyIncomeStatistics = false;
            },
            handleClose(){
                this.dialogVisible = false;
                // 重置表单
                this.$refs["addForm"].resetFields();
                // 重置上传组件
                this.resetUpload();
                // 文件组件隐藏
                this.DestroyIncomeStatistics = false;
            },
            // 打开注册窗口
            openRegisterDialog(){
                this.dialogVisible = true;
                // 文件上传组件显示
                this.DestroyIncomeStatistics = true;
            },
            handleLogin(){
                console.log("username="+this.username);
                console.log("password="+this.password);
                login(this.username,this.password).then(response=>{
                    console.log('登录验证完成后，返回的结果')
                    console.log(response)
                    if(response.code==200){
                        // 登录成功
                        // 存token
                        setToken(response.token)
                        // 路由页面跳转
                        // this.$router.push({path: '/'})
                        location.href="/"
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            getInfo(){
                list().then(response=>{
                    console.log('获得商品测试数据')
                    console.log(response);
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            logout(){
                logout().
                then(response=>{
                    console.log('=============用户退出============')
                    console.log(response);
                    if(response.code==200){
                        // 移除cookie token
                        removeToken();
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped>
    .loginIndex{
        border: 1px solid #C3C3C3;
    }
    article{
        padding: 10px;
    }
    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-size: cover;
        border: 1px solid #D4D4D4;
        width: 100%;
    }
    .login-form {
        border-radius: 6px;
        background: #ffffff;
        width: 400px;
        padding: 25px 25px 5px 25px;
    }

    .login-form .input-icon {
        height: 10px;
        width: 10px;
        margin-left: 2px;
        font-size: 14px;
        margin-top: 10px;
    }

    .login-form .el-input {
        height: 38px;

    }

    .login-form .el-input input {
        height: 38px;
    }
    .login-form .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }

    .login-form .title .logo-img {
        width: 200px;
    }
    .login-form .rememberPass {
        font-size: 14px;
        float: right;
    }
    .login-form .rememberPass a{
        color: #409EFF;
        text-decoration: none;
        margin-left: 10px;
    }
    .login-form .el-login-footer {
        margin: 50px 0px;
        height: 40px;
        width: 100%;
        text-align: center;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
    .login-form .el-login-footer div {
        padding-bottom: 10px;
    }

    .login-form .el-login-footer div span {
        margin-right: 20px;
    }

    .navigationRow{
        margin-bottom: 20px;
    }
    .navigationDiv {
        text-align: center;
        background-color: white;
        height: 150px;
        padding-top: 10px;
    }

    .navigationDiv .navigationSvn {
        font-size: 100px;
        line-height: 150px;
    }

    .navigationDiv .navigationTitle {
        font-size: 20px;
        font-weight: bold;
        color: #5B5B5B;
        padding-top: 10px;
    }
</style>
